//编辑，详情动态表格
<template>
  <div>
    <el-row>
      <el-table
        border
        ref="dynamicTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        size="mini"
        @selection-change="selectionChange"
      >
       <el-table-column
        type="selection"
        align="center"
        width="55" :selectable="selectable">
      </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="通道名称"
          width="80"
          fixed="left"
          prop="channelName"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="通道状态"
          fixed="left"
          prop="channelStatus"
          width="150"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-select
              size="mini"
              :disabled="isDisable"
              v-model="scope.row.channelStatus"
              placeholder="请选择通道状态"
            >
              <el-option
                v-for="(item, index) in routeChannelOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.value === 'handle' || item.value === 'backup'"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <div v-for="(item, index) in tableHead" :key="index">
          <!-- 存在光纤-->
          <el-table-column
            v-if="item.type == 2"
            :label="item.label"
            align="center"
            :prop="item.props"
            :width="item.width"
            show-overflow-tooltip
          ></el-table-column>

          <!-- 非光纤 -->
          <el-table-column
            v-if="item.type == 1"
            :label="item.label"
            align="center"
            :width="item.width"
            show-overflow-tooltip
          >
            <el-table-column
              v-for="(subitem, indexs) in item.subLabel"
              :label="subitem.label"
              :prop="subitem.props"
              align="center"
              :key="indexs"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table-column>
        </div>
      </el-table>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    tableHead: {
      type: Array,
      default: function () {
        return []
      }
    },
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    },
    isDisable: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    selectionChange (val) {
      this.selectionData = val
    },
    getSelection () {
      return this.selectionData
    },
    selectable (row, index) {
      // 通道状态为空闲，才允许用户选择通道
      if (row.channelStatus === 'idle') {
        return true
      } else {
        return false
      }
    }
  },
  data () {
    return {
      selectionData: [],
      maxHeight: 0,
      // 通道状态枚举
      routeChannelOptions: [
        {
          label: '空闲',
          value: 'idle'
        },
        {
          label: '备用',
          value: 'backup'
        },
        {
          label: '损坏',
          value: 'damage'
        },
        {
          label: '主用',
          value: 'main'
        },
        {
          label: '处理中',
          value: 'handle'
        }
      ]
    }
  },
  watch: {
    // el-table绑定的data
    tableData: {
      handler () {
        this.$nextTick(() => {
          this.$refs.dynamicTable.doLayout()
        })
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
